<template>
  <a-button type="primary" @click="showModal">乘车人</a-button>
  <a-modal
    v-model:open="open"
    title="乘车人"
    @ok="handleOk"
    ok-text="确认"
    cancel-text="取消"
  >
    <a-form
      :model="passenger"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
    >
      <a-form-item label="姓名">
        <a-input v-model:value="passenger.name" />
      </a-form-item>
      <a-form-item label="身份证">
        <a-input v-model:value="passenger.idCard" />
      </a-form-item>
      <a-form-item label="旅客类型">
        <a-select v-model:value="passenger.type">
          <a-select-option value="1">成人</a-select-option>
          <a-select-option value="2">儿童</a-select-option>
          <a-select-option value="3">学生</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref, reactive } from "vue";
import { notification } from "ant-design-vue";
import axios from "axios";

const open = ref(false);
const passenger = reactive({
  id: undefined,
  memberId: undefined,
  name: undefined,
  idCard: undefined,
  type: undefined,
  createTime: undefined,
  updateTime: undefined,
});

const showModal = () => {
  open.value = true;
};
const handleOk = (e) => {
  console.log(e);

  axios.post("/member/passenger/save", passenger).then((response) => {
    let data = response.data;
    if (data.success) {
      notification.success({ description: "保存成功！" });
      open.value = false;
    } else {
      notification.error({ description: data.message });
    }
  });
};
</script>
